<template>
  <div class="Vlogo">
    <div>
      <Head></Head>
    </div>
    
    <div class="Tv">
      <div class="videos">
        <transition name="el-zoom-in-center">
          <div class="switch-b" v-show="open">
            <video
              id="video"
              controls
              width="100%"
              height="100%"
              :src="vidoe"
            ></video>
          </div>
        </transition>
        <div class="open" @click="close()">
          <img :src="switch1" alt="" />
        </div>
        <div class="switch" :class="{ active: off }"></div>
      </div>
      <div class="buttom"></div>
      <!-- 播放列表 -->
      <div class="list">
        <div class="directory">
          <p>播放列表</p>
        </div>
        <div class="contentlist">
          <div
            class="vname"
            v-for="(item, index) in listdata"
            :key="index"
            :class="{ active1: active1 == item.id }"
            @click="changev(item)"
            :title="item.name"
          >
            <p>{{ item.name }}</p>
            <p v-show="active1 == item.id">
              <i class="el-icon-loading" v-if="open"></i>
              <i class="el-icon-video-play" v-else></i>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Head from "../components/head";
//import { getvlogo } from "../api/test";
export default {
  name: "index",
  data() {
    return {
      off: false,
      open: true,
      switch1:
        "https://www.imageoss.com/images/2021/10/28/f1acda8b628d749bd56f50fe9041fc7c41bd8ff3ec768eb6.png",
      active1: 0,
      listdata: "",
      vidoe: "",
    };
  },
  methods: {
    close() {
      var video = document.getElementById("video");
      if (this.open != false) {
        this.open = false;
        this.off = true;
        // pause：暂停
        video.pause();
      } else {
        this.open = true;
        this.off = false;
        //play：播放
        video.play();
      }
    },
    changev(item) {
      this.active1 = item.id;
      this.vidoe = this.listdata[item.id].VideoUrl;
    },
  },
  mounted() {
     this.$http.post("/api/user/select_vlogo", {}).then((response) => {
      //初始化加载数据
      console.log("vlogo界面数据", response.data);
      this.listdata = response.data;
      this.vidoe = this.listdata[0].VideoUrl;
    });
    //getvlogo()
      //.then(() => {})
      //.catch((err) => {
        //初始化加载数据
       // this.listdata = err.data.data;
       // this.vidoe = this.listdata[0].video;
    //  });
  },
  components: {
    Head,
  },
};
</script>

<style scoped>
@import "../css/vlogo.css";
</style>
